import React, { Component } from 'react';
import { Descriptions, Badge, Button } from 'antd';
import { real_findCategoryByIdRequest } from '../../../../api/index';
import './commodity-detail.css';

export default class commodityDetail extends Component {
  state = {
    categoryName: '',
    pCategoryName: '',
  };

  returnPage = () => {
    this.props.history.push('/commodity-manage');
  };

  async componentDidMount() {
    const { categoryId } = this.props.location.state;
    if (categoryId) {
      const result = await real_findCategoryByIdRequest(parseInt(categoryId));
      this.setState({
        categoryName: result.name,
        pCategoryName: result.categoryName,
      });
    }
  }

  // getCategoryName = async (id) => {
  //   if (id) {
  //     const result = await real_findCategoryByIdRequest(id);
  //     this.categoryName = result.name;
  //     this.pCategoryName = result.categoryName;
  //   }
  // };

  render() {
    const title = (
      <div className="detail-title">
        <div className="title-text">商品详情/</div>
        <Button className="title-button" onClick={this.returnPage} type="link">
          返回
        </Button>
      </div>
    );

    const { name, price, desc, detail, status, images } =
      this.props.location.state;

    const { categoryName, pCategoryName } = this.state;
    // this.getCategoryName(parseInt(categoryId));

    // console.log(this.categoryName);

    // const { categoryName, pCategoryName } = this.getCategoryName(
    //   parseInt(categoryId)
    // );

    return (
      <div className="detail-container">
        <Descriptions
          labelStyle={{ textAlign: 'center' }}
          className="detail-description"
          column={2}
          title={title}
          bordered
        >
          <Descriptions.Item label="商品名称">{name}</Descriptions.Item>
          <Descriptions.Item label="商品价格">{`￥${price}`}</Descriptions.Item>
          <Descriptions.Item label="状态">
            {status >= 1 ? (
              <Badge status="processing" text="在售" />
            ) : (
              <Badge status="error" text="停售" />
            )}
          </Descriptions.Item>
          <Descriptions.Item style={{ width: 250 }} label="所属分类">
            {pCategoryName}
            {categoryName ? '/' + categoryName : null}
          </Descriptions.Item>
          <Descriptions.Item label="商品描述" span={2}>
            {desc}
          </Descriptions.Item>
          <Descriptions.Item label="商品详情" span={2}>
            <div dangerouslySetInnerHTML={{ __html: detail }}></div>
          </Descriptions.Item>
          <Descriptions.Item
            labelStyle={{ height: 270 }}
            label="商品图片"
            span={2}
          >
            <img className="commodity-img" src={images} alt="img_1" />
          </Descriptions.Item>
        </Descriptions>
      </div>
    );
  }
}
